<div>
  <div class="l-window-mask" style="display: block; height: 100%;"></div>
	<div id="container">
		<div id="toolBar"></div>
	</div>
	<div id="legendDiv">
		<ul id="legend"></ul>
	</div>
	<div id="calendars" style="visibility: hidden;"></div>
</div>
<script type="text/template" id="template-calendar">
  <div class="clndr-month-title">
    <div class="month"><-= year ->年<-switch(month){case 'January':->1<-break;->
  <-case 'February':->2<-break;->
  <-case 'March':->3<-break;->
  <-case 'April':->4<-break;->
  <-case 'May':->5<-break;->
  <-case 'June':->6<-break;->
  <-case 'July':->7<-break;->
  <-case 'August':->8<-break;->
  <-case 'September':->9<-break;->
  <-case 'October':->10<-break;->
  <-case 'November':->11<-break;->
  <-case 'December':->12<-break;->
<-}->月
</div>
  </div>
  <div class="clndr-grid">
    <div class="days-of-the-week">
      <- _.each(daysOfTheWeek, function(day) { ->
        <div class="header-day"><-= day -></div>
      <- }); ->
      <div class="days">
        <- _.each(days, function(day) { ->
          <div id='calendar-day-<-=day.date==null?'null':day.date.format("YYYY-MM-DD")->' class="<-=day.date==null?'':('day calendar-day-'+day.date.format("YYYY-MM-DD")+' week-'+day.date.day())->"><-if(day.date!=null){-><a class='calendar-day-link'><-= day.day -></a><-}-></div>
        <- }); ->
  <-if(days.length!=42){for(var i=0;i<(42-days.length);i++){->
    <div></div>
  <-}}->
      </div>
    </div>
  </div>
</script>
<style>
* {
	margin: 0px;
	padding: 0px;
	border: none;
	list-style: none;
}

body {
	background-color: #FFFFFF;
	margin: 0px;
	padding: 0px;
	border: none;
}

#calendars {
	width: 100%;
	background-color: #FFFFFF;
	float: left;
	overflow: auto;
}

.calendar {
	width: 211px;
	float: left;
	margin-top: 4px;
	margin-left: 6px;
	overflow: auto;
	float: left;
}

.clndr-month-title {
	width: 211px;
	height: 16px;
	float: left;
	background-color: #3883A3;
	font-family: arial;
	font-size: 12px;
	line-height: 16px;
	font-weight: bold;
	text-align: center;
	color: white;
	font-weight: bold;
}
/*月份标题*/
.days-of-the-week {
	width: 211px;
	float: left;
	background-color: #97CE7F;
}
/*星期头*/
.header-day {
	float: left;
	width: 29px;
	height: 16px;
	border-left: 1px solid #71BBD2;
	background-color: #71BBD2;
	text-align: center;
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	color: white;
}
/*天容器*/
.days {
	height: 108px;
	float: left;
	border-right: 1px solid white;
	border-bottom: 3px solid #71BBD2;
	background-color: white;
	float: left;
}
/*天*/
.days div {
	float: left;
	width: 29px;
	height: 17px;
	background-color: #F4F4F4;
	text-align: center;
	line-height: 18px;
	font-family: arial;
	font-size: 12px;
	text-align: center;
	color: black;
	border-top: 1px solid white;
	border-left: 1px solid white;
	font-size: 12px;
}

.days div a {
	display: block;
	height: 90%;
	text-decoration: none;
	padding: 1px solid;
	-moz-user-select: none; /*火狐*/
	-webkit-user-select: none; /*webkit浏览器*/
	-ms-user-select: none;
	/*IE10*/
	-khtml-user-select: none; /*早期浏览器*/
	user-select: none;
	-ms-user-select: none; /*IE10*/
	-khtml-user-select: none;
	-khtml-user-select: none;
}

.days div a:hover {
	font-weight: bolder;
	margin: 0px;
	border: 1px solid black;
	line-height: 16px;
}
/*有效日*/
.day {
	cursor: pointer;
}
/*图例*/
#legendDiv {
	background-color: #FFF;
	float: left;
	height: 20px;
	width: 100%;
	float: left;
}

.legend {
	float: left;
}

.legend-item-color {
	float: left;
	width: 20px;
	height: 10px;
	margin: 5px 5px 0px 8px;
	border: 1px solid #AAA;
}

.legend-item-text {
	float: left;
	line-height: 20px;
}
/*右键菜单*/
#type-select {
	position: absolute;
	width: auto;
	height: auto;
	background-color: #FFF;
	border-top: 1px solid #999;
	border-left: 1px solid #999;
	border-right: 1px solid #999;
	display: none;
}

#type-select table {
	padding: 2px 0px;
	margin: 0px 5px;
	cursor: default;
	margin: 0px 5px;
}

.type-select-color {
	width: 20px;
	height: 10px;
	vertical-align: middle;
	border: 1px solid #AAA;
}

.type-select-text {
	width: auto;
	line-height: 20px;
	margin-left: 5px;
}

.type-select-li {
	border-bottom: 1px solid #999;
}

.type-select-li:hover {
	background-color: #60A8E2;
}
</style>